<!--
* @author wn
* @date 2023/08/08 11:24:46
* @description: 首页骨架屏
!-->
<template name="skeleton">
	<view class="sk-container">
		<!-- <view is="pages/index/components/CustomNavBar">
			<view class="navbar CustomNavBar--navbar" style="padding-top: 47px">
				<view class="logo CustomNavBar--logo">
					<image class="logo-image CustomNavBar--logo-image sk-image"></image>
					<text
						class="logo-text CustomNavBar--logo-text sk-transparent sk-text-3-3333-96 sk-text"
					>
						新鲜 · 亲民 · 快捷
					</text>
				</view>
				<view class="search CustomNavBar--search">
					<text
						class="icon-search CustomNavBar--icon-search sk-transparent sk-text-14-2857-397 sk-text sk-pseudo sk-pseudo-circle"
						>搜索商品</text
					>
					<text
						class="icon-scan CustomNavBar--icon-scan sk-pseudo sk-pseudo-circle"
					></text>
				</view>
			</view>
		</view> -->
		<scroll-view enable-back-to-top refresher-enabled scroll-y>
			<view is="components/XtxSwiper">
				<view class="carousel XtxSwiper--carousel">
					<swiper
						:autoplay="false"
						:circular="true"
						:interval="3000"
						:current="0"
					></swiper>
					<view class="indicator XtxSwiper--indicator">
						<text class="dot XtxSwiper--dot"></text>
						<text class="dot XtxSwiper--dot"></text>
						<text class="dot XtxSwiper--dot active XtxSwiper--active"></text>
						<text class="dot XtxSwiper--dot"></text>
						<text class="dot XtxSwiper--dot"></text>
					</view>
				</view>
			</view>
			<view is="pages/index/components/CategoryPanel">
				<view class="category CategoryPanel--category">
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-957 sk-text"
							>居家</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-450 sk-text"
							>锦鲤</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-72 sk-text"
							>服饰</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-462 sk-text"
							>母婴</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-63 sk-text"
							>个护</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-262 sk-text"
							>严选</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-631 sk-text"
							>数码</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-373 sk-text"
							>运动</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-999 sk-text"
							>杂项</text
						>
					</navigator>
					<navigator
						class="category-item CategoryPanel--category-item"
						hover-class="none"
					>
						<image
							class="icon CategoryPanel--icon sk-image"
							mode="'scaleToFit'"
						></image>
						<text
							class="text CategoryPanel--text sk-transparent sk-text-14-2857-989 sk-text"
							>品牌</text
						>
					</navigator>
				</view>
			</view>
			<view is="pages/index/components/HotPanel">
				<view class="hot-panel HotPanel--hot-panel">
					<view class="item HotPanel--item">
						<view class="title HotPanel--title">
							<text
								class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-10 sk-text"
								>特惠推荐</text
							>
							<text
								class="title-alt HotPanel--title-alt sk-transparent sk-text-14-2857-57 sk-text"
								>精选全攻略</text
							>
						</view>
						<navigator class="cards HotPanel--cards" hover-class="none">
							<image
								class="hot-img HotPanel--hot-img sk-image"
								mode="aspectFit"
							></image>
							<image
								class="hot-img HotPanel--hot-img sk-image"
								mode="aspectFit"
							></image>
						</navigator>
					</view>
					<view class="item HotPanel--item">
						<view class="title HotPanel--title">
							<text
								class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-109 sk-text"
								>爆款推荐</text
							>
							<text
								class="title-alt HotPanel--title-alt sk-transparent sk-text-14-2857-296 sk-text"
								>最受欢迎</text
							>
						</view>
						<navigator class="cards HotPanel--cards" hover-class="none">
							<image
								class="hot-img HotPanel--hot-img sk-image"
								mode="aspectFit"
							></image>
							<image
								class="hot-img HotPanel--hot-img sk-image"
								mode="aspectFit"
							></image>
						</navigator>
					</view>
					<view class="item HotPanel--item">
						<view class="title HotPanel--title">
							<text
								class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-760 sk-text"
								>一站买全</text
							>
							<text
								class="title-alt HotPanel--title-alt sk-transparent sk-text-14-2857-168 sk-text"
								>精心优选</text
							>
						</view>
						<navigator class="cards HotPanel--cards" hover-class="none">
							<image
								class="hot-img HotPanel--hot-img sk-image"
								mode="aspectFit"
							></image>
							<image
								class="hot-img HotPanel--hot-img sk-image"
								mode="aspectFit"
							></image>
						</navigator>
					</view>
					<view class="item HotPanel--item">
						<view class="title HotPanel--title">
							<text
								class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-596 sk-text"
								>新鲜好物</text
							>
							<text
								class="title-alt HotPanel--title-alt sk-transparent sk-text-14-2857-513 sk-text"
								>生活加分项</text
							>
						</view>
						<navigator class="cards HotPanel--cards" hover-class="none">
							<image
								class="hot-img HotPanel--hot-img sk-image"
								mode="aspectFit"
							></image>
							<image
								class="hot-img HotPanel--hot-img sk-image"
								mode="aspectFit"
							></image>
						</navigator>
					</view>
				</view>
			</view>
			<view is="components/XtxGuess" class="r">
				<text
					class="caption XtxGuess--caption sk-transparent sk-text-14-2857-106 sk-text sk-pseudo sk-pseudo-circle"
					>猜你喜欢</text
				>
				<view class="guess XtxGuess--guess">
					<navigator class="guess-item XtxGuess--guess-item">
						<image
							class="image XtxGuess--image sk-image"
							mode="aspectFill"
						></image>
					</navigator>
					<navigator class="guess-item XtxGuess--guess-item">
						<image
							class="image XtxGuess--image sk-image"
							mode="aspectFill"
						></image>
					</navigator>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<style lang="scss">
.sk-transparent {
	color: transparent !important;
}
.sk-text-3-3333-96 {
	background-image: linear-gradient(
		transparent 3.3333%,
		#eeeeee 0%,
		#eeeeee 96.6667%,
		transparent 0%
	) !important;
	background-size: 100% 26.285rpx;
	position: relative !important;
}
.sk-text {
	background-origin: content-box !important;
	background-clip: content-box !important;
	background-color: transparent !important;
	color: transparent !important;
	background-repeat: repeat-y !important;
}
.sk-text-14-2857-397 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.7991rpx;
	position: relative !important;
}
.sk-text-14-2857-957 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-450 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-72 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-462 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-63 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-262 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-631 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-373 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-999 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-989 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 34.3458rpx;
	position: relative !important;
}
.sk-text-14-2857-10 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 44.1589rpx;
	position: relative !important;
}
.sk-text-14-2857-57 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.7991rpx;
	position: relative !important;
}
.sk-text-14-2857-109 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 44.1589rpx;
	position: relative !important;
}
.sk-text-14-2857-296 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.7991rpx;
	position: relative !important;
}
.sk-text-14-2857-760 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 44.1589rpx;
	position: relative !important;
}
.sk-text-14-2857-168 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.7991rpx;
	position: relative !important;
}
.sk-text-14-2857-596 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 44.1589rpx;
	position: relative !important;
}
.sk-text-14-2857-513 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.7991rpx;
	position: relative !important;
}
.sk-text-14-2857-106 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 44.1589rpx;
	position: relative !important;
}
.sk-image {
	background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
	background: #efefef !important;
	background-image: none !important;
	color: transparent !important;
	border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
	border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
	border-radius: 50% !important;
}
.sk-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: transparent;
}
</style>
